<template>
  <!-- 竖向 导航栏 ==》主要是赛事与活动 -->
  <div>
    <div class="Vnav">
      <el-menu
        :default-active="this.$route.path.substr(1)"
        class="el-menu-vertical"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <template v-for="(v,i) in navArr">
          <template v-if="v.subs">
            <el-submenu :index="i+''" :key="i">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{v.txt}}</span>
              </template>
              <template v-for="(vv,ii) in v.subs">
                <el-menu-item :index="vv.path" :key="i+'-'+ii">{{vv.txt}}</el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="v.path" :key="i">
              <i class="el-icon-menu"></i>
              <span slot="title">{{v.txt}}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
    <div class="contentWrap">
      <router-view :key="this.$route.path"></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navArr: [
        {
          xicon: "",
          txt: "banner设置",
          path: "Marketing/banner",
        },
        {
          xicon: "",
          txt: "热门设置",
          path: "Marketing/hot",
        },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
      if('/'+key==this.$route.path)return false;
      this.$router.push("/" + key);
    },
  },
  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.Vnav {
  width: 200px;
  height: calc(100% - 60px);
  padding-top: 60px;
  position: fixed;
  background-color: #545c64;
  top: 0;
}
.contentWrap {
  overflow-y: auto;
  position: absolute;
  width: calc(100% - 200px - 48px);
  margin-left: 200px;
  height: calc(100%  - 32px);
  background-color: #edf0f6;
  padding: 16px 24px;
}

/*滚动条整体样式*/
.contentWrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #f2f2f2;
}
/*滚动条里面小方块*/
.contentWrap::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b4bbc5;
}
/*滚动条里面轨道*/
.contentWrap::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  /* border-radius: 10px; */
  /* background: #ededed; */
  /* background: #60c5ff; */
}
</style>